{extend name="shop/new/base" /}
{block name="head"}
<!--头部-->
<div class="header shopHeader">
    <div class="w w1200 clearfix">

        <div class="fl oneItem">
            <div class="logo">
                <a href="{:__URL('SHOP_MAIN')}" class="logo_a"><img src="{$pc_info['logo']}" alt=""></a>
            </div>
        </div>

        <div class="stepbar-box step3"></div>

    </div>
</div>
<!--分隔线-->
<div class="sc-hr"></div>
{/block}
{block name="main"}
<!--支付信息-->
<div class="cStand-pay-info w1000">
    <p><span class="icon-success icon"></span> 订单提交成功，还差最后一步就能抢到心仪的商品，赶快支付吧</p>
    <p>请在 <span class="red J-orderTime">00:00:00</span>内完成支付，否则订单会被自动关闭</p>
    <p>待支付：<span class="red">￥{$pay_value.pay_money}</span></p>
</div>
<!--支付渠道-->
<div class="w1000" style="margin-bottom:10px;">
    <div class="pay-method">
        <div class="tabs-container">
            <ul class="tabs clearfix" style="background-color: #fff;border-bottom: 1px solid #e4e4e4">
                <li class="navitems-group active"><a href="#tab1">第三方平台</a></li>
                {if $tlpay}
                <li class="navitems-group"><a href="#tab2">银行卡</a></li>
                {/if}
            </ul>
            <div class="tab_container topUp-tc">

                <div id="tab1" class="tab_content">
                    <div class="threePlatform J-selectPay">
                        {if condition="$pay_config['wchat_pay_config']['is_use'] ==1 || $pay_config['ali_pay_config']['is_use'] == 1"}
                        {if condition="$pay_config['wchat_pay_config']['is_use']==1"}
                        <a href="javascript:void(0);"   data-pay="wechat">
                            <img src="__TEMP__/{$style}/public/image/wechat.png" alt="">
                            <i></i>
                        </a>
                        {/if}
                        {if condition="$pay_config['ali_pay_config']['is_use']==1"}
                        <a href="javascript:void(0);" data-pay="alipay">
                            <img src="__TEMP__/{$style}/public/image/alipay.png" alt="">
                            <i></i>
                        </a>
                        {/if}
                        {else/}
                        后台暂未开启支付方式
                        {/if}
                    </div>
                </div>

                <div id="tab2" class="tab_content" style="display: none">
                    <div class="threePlatform J-selectPay">
                        {if $account_list}
                        {foreach $account_list as $v}
                            <a href="javascript:void(0);"  data-pay="tlpay" data-id="{$v['id']}">
                                 <img src="{$v['bank_iocn']}" style="width: 30px;height:30px">{$v['open_bank']}   {if $v['bank_type']=='00'}  储蓄卡{else}  信用卡{/if} ({$v['account_number']})
                                 <i></i>
                            </a>
                        {/foreach}
                        {/if}
                            <div class="pay-addCard">
                                <i class="icon icon-add"></i> 使用新卡
                            </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="toPay">
        <a href="javascript:void(0);" class="border J-pay">前往支付</a>
    </div>
</div>

<!--添加银行卡模态框-->
<div class="addAccount-dialogs" style="display: none">
    <div class="pop-wrapper">
        <div class="pop-msg" style="display: none">
            <p class="error error_Tel">账户名错误</p>
        </div>
        <dl class="clearfix">
            <dt><em>*</em>卡类型：</dt>
            <dd class="controls">
                    <label class="sex-label"> 
                        <input type="radio" name="bank_type" value="00">
                        <span>储蓄卡</span>
                    </label>
                    <label class="sex-label"> 
                        <input type="radio" name="bank_type" value="02">
                        <span>信用卡</span>
                    </label>
            </dd>

        </dl>
        <div class="with_bank" style="">
            <dl class="clearfix bank_code">
                <dt><em>*</em>银行：</dt>
                <dd>
                    <select name="bank_code"  class="addr-select" id="bank_code">
                        {foreach $bank_list as $value}
                        <option value="{$value['bank_code']}">{$value['bank_short_name']}</option>
                        {/foreach}
                    </select>
                </dd>
            </dl>
            <dl class="clearfix">
                <dt><em>*</em>银行卡号：</dt>
                <dd>
                    <input id="account_number" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="请输入银行卡号">
                </dd>
            </dl>
            <dl class="clearfix bank_username">
                <dt><em>*</em>持卡人：</dt>
                <dd>
                    <input id="realname" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="请输入持卡人姓名">
                </dd>
            </dl>
            <dl class="clearfix bank_card">
                <dt><em>*</em>身份证号：</dt>
                <dd>
                    <input id="bank_card" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="请输入身份证号码">
                </dd>
            </dl>
        </div>
            <dl class="clearfix">
                <dt><em>*</em>有效期：</dt>
                <dd>
                    <input id="valid_date" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="示例：01/20，输入0120">
                </dd>
            </dl>
            <dl class="clearfix ">
                <dt><em>*</em>安全码：</dt>
                <dd>
                    <input id="cvv2" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="卡背后三位数">
                </dd>
            </dl>
            <dl class="clearfix ">
                <dt><em>*</em>手机号码：</dt>
                <dd>
                    <input id="bank_mobile" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="银行预留手机号码">
                </dd>
            </dl>
            <dl class="clearfix">
                <dt><em>*</em>短信验证码：</dt>
                <dd class="pr">
                    <input id="sms_code" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="银行预留手机号码">
                    <button type="button" class="obtain-code2 withdrawal-add1">发送验证码</button>
                </dd>
            </dl>



    </div>
</div>
<div class="pay-dialogs" style="display: none">
    <div class="pop-wrapper">
        <dl class="clearfix ">
            <dt><em>*</em>手机号码：</dt>
            <dd>
                <input id="bank_mobiles" disabled class="addr-input l input_focus" type="text" autocomplete="off" placeholder="银行预留手机号码">
            </dd>
        </dl>
        <dl class="clearfix">
            <dt><em>*</em>短信验证码：</dt>
            <dd class="pr">
                <input id="sms_codes" class="addr-input l input_focus" type="text" autocomplete="off" placeholder="银行预留手机号码">
                <button type="button" class="obtain-code2 withdrawal-adds">发送验证码</button>
            </dd>
        </dl>
    </div>
</div>
<input type="hidden" value="{$pay_value.create_time | getTimeStampTurnTime}" id="create_time" />
<input type="hidden" value="{$shop_config['order_buy_close_time']}" id="buy_close_time" />
<input type="hidden" value="{$pay_value['out_trade_no']}" id="out_trade_no" />
<input type="hidden"  id="thpinfo">
{/block}
{block name="javascript"}
<script>
    require(['pay','common','dialog'], function (pay,common,dialog) {
        // pay.operation();
        common.tabToggle();
        countdown();
        $(".J-selectPay a").on('click', function () {
            $(this).addClass('selected').siblings().removeClass('selected');
            $(this).parents('.tab_content').siblings().find('a').removeClass('selected');
        });
        //去支付
        $(".J-pay").click(function() {
                if ($('.J-selectPay>.selected').attr("data-pay") != null) {
                    var out_trade_no = $('#out_trade_no').val();
                    var url = '';
                    switch ($('.J-selectPay>.selected').attr("data-pay")) {
                    case "wechat":
                            url = __URL(SHOPMAIN+'/pay/wchatpay?no='+out_trade_no);
                            location.href=url;
                            break;
                    case "alipay":
                            //跳转到支付宝
                            url = __URL(SHOPMAIN+'/pay/alipay?no='+out_trade_no);
                            window.open(url);
                            break;
                        case "tlpay":
                            id = $('.J-selectPay>.selected').attr("data-id");
                            $.ajax({
                                type : "post",
                                url : "{:__URL('SHOP_MAIN/member/tlPayApplyAgree')}",
                                async:false,
                                data : {
                                    "out_trade_no":out_trade_no,
                                    "id":id,
                                },
                                success : function(data) {
                                    if(data['code']==1){
                                        dialog.updateAddress("确认支付",".pay-dialogs",function(){
                                            var sms_code = $("#sms_codes").val();
                                            var thpinfo = data['thpinfo'];
                                            if(sms_code==''){
                                                layer.msg('验证码不能为空');
                                                $("#sms_codes").focus();
                                                return false;
                                            }
                                            if(thpinfo==''){
                                                layer.msg('请先获取验证码');
                                                $("#sms_codes").focus();
                                                return false;
                                            }
                                            if(sms_code && thpinfo){
                                                $.ajax({
                                                    type : "post",
                                                    url : "{:__URL('SHOP_MAIN/member/tlPay')}",
                                                    async:false,
                                                    data : {
                                                        "id":id,
                                                        "thpinfo":thpinfo,
                                                        "sms_code":sms_code,
                                                        "out_trade_no":out_trade_no,
                                                    },
                                                    success : function(data) {
                                                        if(data['code']>0){
                                                            layer.msg( $data['message'],{icon: 1, time: 2000});
                                                            location.href="{:__URL('SHOP_MAIN/member/orderlist')}";
                                                        }else{
                                                            layer.msg( $data['message']);
                                                        }
                                                    }
                                                });
                                            }
                                        })
                                    }else{
                                        layer.msg(data['message']);
                                    }
                                }
                            });

                            break;
                    }

                    
                }
        });
        var interval = null;

        // interval = setInterval("countdown()", 1000);
        interval = setInterval(countdown, 1000);
        function countdown() {
            var date = new Date($("#create_time").val().replace(/\-/g, "\/"));//订单创建时间
            var buy_close_time = parseFloat($("#buy_close_time").val()) * 60 * 1000;//订单关闭时间
            date.setDate(date.getDate() + 1);
            var date_now = new Date($.ajax({async: false}).getResponseHeader("Date"));//当前时间
            var end_time = date.getTime() + buy_close_time; //结束时间毫秒数
            var lag = (end_time - date_now.getTime()) / 1000; //当前时间和结束时间之间的秒数

            if (lag > 0) {
                var hour = Math.floor((lag / 3600) % 24);
                var minute = Math.floor((lag / 60) % 60);
                var second = Math.floor(lag % 60);
                if (hour == 0 && second == 0 && minute == 0) {
                    clearInterval(interval);
                    window.location.reload();
                }
                if (second < 10) {
                    second = "0" + second;
                }
                if (minute < 10) {
                    minute = "0" + minute;
                }
                if (hour < 10) {
                    hour = "0" + hour;
                }
                $(".J-orderTime").text(hour + ":" + minute + ":" + second);
            }
       }
       $('.pay-addCard').on('click',function(){
          dialog.updateAddress("添加银行卡",".addAccount-dialogs",function(){
              var realname = $("#realname").val();
              var account_number = $("#account_number").val();
              var bank_type = $('input[name=bank_type]:checked').val();
              var bank_code = $("#bank_code").val();
              var bank_card = $("#bank_card").val();
              var valid_date = $("#valid_date").val();
              var bank_mobile = $("#bank_mobile").val();
              var cvv2 = $("#cvv2").val();
              var sms_code = $("#sms_code").val();
              var thpinfo = $("#thpinfo").val();
              if(sms_code==''){
                  layer.msg('验证码不能为空');
                  $("#sms_code").focus();
                  return false;
              }
              if(thpinfo==''){
                  layer.msg('请先获取验证码');
                  $("#sms_code").focus();
                  return false;
              }
              if(sms_code && thpinfo){
                  if(realname==''){
                      layer.msg('持卡人姓名不能为空');
                      $("#realname").focus();
                      return false;
                  }
                  if(bank_mobile==''){
                      layer.msg('手机号不能为空');
                      $("#bank_mobile").focus();
                      return false;
                  }
                  if(account_number==''){
                      layer.msg('银行卡号不能为空');
                      $("#account_number").focus();
                      return false;
                  }
                  if(bank_type == '02'){
                      if(valid_date==''){
                          layer.msg('有效期不能为空');
                          $("#valid_date").focus();
                          return false;
                      }
                      if(cvv2==''){
                          layer.msg('安全码不能为空');
                          $("#cvv2").focus();
                          return false;
                      }
                  }
                  if(bank_mobile==''){
                      layer.msg('手机号不能为空');
                      $("#bank_mobile").focus();
                      return false;
                  }
                  if(bank_code==''){
                      layer.msg('银行不能为空');
                      $("#bank_code").focus();
                      return false;
                  }
                  if(bank_type==''){
                      layer.msg('银行卡类型不能为空');
                      $("#bank_type").focus();
                      return false;
                  }
                  if(bank_card==''){
                      layer.msg('持卡人身份证号不能为空');
                      $("#bank_card").focus();
                      return false;
                  }
                  $.ajax({
                      type : "post",
                      url : "{:__URL('SHOP_MAIN/member/tlAgreeSigning')}",
                      async:false,
                      data : {
                          "realname":realname,
                          "thpinfo":thpinfo,
                          "bank_type":bank_type,
                          "bank_code":bank_code,
                          "bank_card":bank_card,
                          "sms_code":sms_code,
                          "mobile":bank_mobile,
                          "valid_date":valid_date,
                          "cvv2":cvv2,
                          "account_number":account_number
                      },
                      success : function(data) {
                          if(data['code']>0){
                              layer.msg('添加成功',{icon: 1, time: 2000});
                              location.href = __URL(SHOPMAIN + "/member/accountList");
                          }else{
                              layer.msg('添加失败');
                          }
                      }
                  });
              }
          })
       })
        $('body').on('click',".withdrawal-add1",function(){
            var realname = $("#realname").val();
            var account_number = $("#account_number").val();
            var bank_type = $('input[name=bank_type]:checked').val();
            var bank_code = $("#bank_code").val();
            var bank_card = $("#bank_card").val();
            var valid_date = $("#valid_date").val();
            var bank_mobile = $("#bank_mobile").val();
            var cvv2 = $("#cvv2").val();
            var thpinfo = $("#thpinfo").val();
            if(realname==''){
                layer.msg('持卡人姓名不能为空');
                $("#realname").focus();
                return false;
            }
            if(account_number==''){
                layer.msg('银行卡号不能为空');
                $("#account_number").focus();
                return false;
            }
            if(bank_type == '02'){
                if(valid_date==''){
                    layer.msg('有效期不能为空');
                    $("#valid_date").focus();
                    return false;
                }
                if(cvv2==''){
                    layer.msg('安全码不能为空');
                    $("#cvv2").focus();
                    return false;
                }
            }
            if(bank_mobile==''){
                layer.msg('手机号不能为空');
                $("#bank_mobile").focus();
                return false;
            }
            if(bank_code==''){
                layer.msg('银行不能为空');
                $("#bank_code").focus();
                return false;
            }
            if(bank_type==''){
                layer.msg('银行卡类型不能为空');
                $("#bank_type").focus();
                return false;
            }
            if(bank_card==''){
                layer.msg('持卡人身份证号不能为空');
                $("#bank_card").focus();
                return false;
            }
            if(thpinfo){
                $.ajax({
                    type : "post",
                    url : "{:__URL('SHOP_MAIN/member/tlAgreeSms')}",
                    async:false,
                    data : {
                        "realname":realname,
                        "type":1,
                        "bank_type":bank_type,
                        "bank_code":bank_code,
                        "bank_card":bank_card,
                        "valid_date":valid_date,
                        "mobile":bank_mobile,
                        "cvv2":cvv2,
                        "thpinfo":thpinfo,
                        "account_number":account_number
                    },
                    success : function(data) {
                        if(data['code']>0){
                            layer.msg(data['message'],{icon: 1, time: 2000});
                        }else{
                            layer.msg(data['message']);
                        }
                    }
                });
            }else{
                if(realname==''){
                    layer.msg('持卡人姓名不能为空');
                    $("#realname").focus();
                    return false;
                }
                if(account_number==''){
                    layer.msg('银行卡号不能为空');
                    $("#account_number").focus();
                    return false;
                }
                if(bank_type == '02'){
                    if(valid_date==''){
                        layer.msg('有效期不能为空');
                        $("#valid_date").focus();
                        return false;
                    }
                    if(cvv2==''){
                        layer.msg('安全码不能为空');
                        $("#cvv2").focus();
                        return false;
                    }
                }
                if(bank_mobile==''){
                    layer.msg('手机号不能为空');
                    $("#bank_mobile").focus();
                    return false;
                }
                if(bank_code==''){
                    layer.msg('银行不能为空');
                    $("#withdraw1").find("#bank_code").focus();
                    return false;
                }
                if(bank_type==''){
                    layer.msg('银行卡类型不能为空');
                    $("#bank_type").focus();
                    return false;
                }
                if(bank_card==''){
                    layer.msg('持卡人身份证号不能为空');
                    $("#bank_card").focus();
                    return false;
                }
                $.ajax({
                    type : "post",
                    url : "{:__URL('SHOP_MAIN/member/addAccount')}",
                    async:false,
                    data : {
                        "realname":realname,
                        "type":account_type,
                        "bank_type":bank_type,
                        "bank_code":bank_code,
                        "bank_card":bank_card,
                        "valid_date":valid_date,
                        "mobile":bank_mobile,
                        "cvv2":cvv2,
                        "account_number":account_number
                    },
                    success : function(data) {
                        if(data['code']>0){
                            layer.msg(data['message']);
                            $("#thpinfo").val(data['thpinfo']);
                        }else{
                            layer.msg(data['message']);
                        }
                    }
                });
            }

        });
    });
    

</script>
{/block}